<template>
	<view class="charts-box">
		<u-section title="月目标达成表" color="#379b9c" :right="false" style="margin: 10px;"></u-section>
		<uni-table minWidthAuto>
			<uni-tr>
				<uni-th align="center">院区</uni-th>
				<uni-th align="center">月目标业绩</uni-th>
				<uni-th align="center">已达成量</uni-th>
				<uni-th align="center">已达成比例</uni-th>
				<uni-th align="center">目前差距</uni-th>
				<uni-th align="center">今年业绩</uni-th>
				<uni-th align="center">今年目标</uni-th>
				<uni-th align="center">年达成比例</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in staticYueMuBiaoDaChengData" :key="index">
				<uni-td align="center">{{ item.deptName }}</uni-td>
				<uni-td align="center">{{ item.ymbyj }}</uni-td>
				<uni-td align="center">{{ item.ydcl }}</uni-td>
				<uni-td align="center">{{ item.ydcbl }}</uni-td>
				<uni-td align="center">{{ item.mqcj }}</uni-td>
				<uni-td align="center">{{ item.jnyj }}</uni-td>
				<uni-td align="center">{{ item.jnmb }}</uni-td>
				<uni-td align="center">{{ item.ndcbl }}</uni-td>
			</uni-tr>
		</uni-table>
		<u-section title="业绩汇总表" color="#379b9c" :right="false" style="margin: 10px;"></u-section>
		<uni-table minWidthAuto>
			<uni-tr>
				<uni-th align="center">院区</uni-th>
				<uni-th align="center">今日业绩</uni-th>
				<uni-th align="center">今日件数</uni-th>
				<uni-th align="center">本月退保</uni-th>
				<uni-th align="center">本月退保件数</uni-th>
				<uni-th align="center">本周业绩</uni-th>
				<uni-th align="center">本周件数</uni-th>
				<!-- <uni-th align="center">周目标</uni-th> -->
				<!-- <uni-th align="center">达成比</uni-th> -->
			</uni-tr>
			<uni-tr v-for="(item, index) in staticYDatas" :key="index">
				<uni-td align="center">{{ item.deptName }}</uni-td>
				<uni-td align="center">{{ item.jryj }}</uni-td>
				<uni-td align="center">{{ item.jrjs }}</uni-td>
				<uni-td align="center">{{ item.bytb }}</uni-td>
				<uni-td align="center">{{ item.bytbjs }}</uni-td>
				<uni-td align="center">{{ item.bzyj }}</uni-td>
				<uni-td align="center">{{ item.bzjs }}</uni-td>
				<!-- <uni-td align="center">{{ item.jnmb }}</uni-td> -->
				<!-- <uni-td align="center">{{ item.ndcbl }}</uni-td> -->
			</uni-tr>
		</uni-table>
		<u-section title="上月同期汇总表" color="#379b9c" :right="false" style="margin: 10px;"></u-section>
		<uni-table minWidthAuto>
			<uni-tr>
				<uni-th align="center">院区</uni-th>
				<uni-th align="center">上月同期业绩</uni-th>
				<uni-th align="center">本月达成业绩</uni-th>
				<uni-th align="center">上月同期件数</uni-th>
				<uni-th align="center">本月达成件数</uni-th>
				<uni-th align="center">业绩增长率</uni-th>
				<uni-th align="center">件数增长率</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in staticSYTQHZData" :key="index">
				<uni-td align="center">{{ item.deptName }}</uni-td>
				<uni-td align="center">{{ item.sytqyj }}</uni-td>
				<uni-td align="center">{{ item.bydcyj }}</uni-td>
				<uni-td align="center">{{ item.sytqjs }}</uni-td>
				<uni-td align="center">{{ item.bydcjs }}</uni-td>
				<uni-td align="center">{{ item.yjzzl }}</uni-td>
				<uni-td align="center">{{ item.jszzl }}</uni-td>
			</uni-tr>
		</uni-table>
		<u-section title="各科室月累计投保件数" color="#379b9c" :right="false" style="margin: 10px;"></u-section>
		<uni-table minWidthAuto>
			<uni-tr>
				<uni-th align="center">院区</uni-th>
				<uni-th align="center" v-for="(item, index) in ksList" :key="index">{{ item }}</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in staticKSData" :key="index">
				<uni-td align="center">{{ item.deptName }}</uni-td>
				<uni-td align="center" v-for="(item2, index2) in ksList" :key="index2">
					<span v-for="(item1, index1) in item.ksList" :key="index1" v-if="item1.ksName == item2">
						{{ item1.js }}
					</span>
				</uni-td>
			</uni-tr>
		</uni-table>
		<!-- <qiun-data-charts type="column" :chartData="chartData" /> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// chartData: {},
				staticYueMuBiaoDaChengData: [],
				staticYDatas: [],
				staticSYTQHZData: [],
				staticKSData: [],
				ksList: []
			};
		},
		onLoad() {
			// this.getServerData();
			this.staticYueMuBiaoDaCheng();
			this.staticYData();
			this.staticSYTQHZ();
			this.staticKS();
		},
		methods: {
			staticYueMuBiaoDaCheng() {
				this.$api.staticYueMuBiaoDaCheng().then(res => {
					this.staticYueMuBiaoDaChengData = res.data;
				})
			},
			staticYData() {
				this.$api.staticYData().then(res => {
					this.staticYDatas = res.data;
				})
			},
			staticSYTQHZ() {
				this.$api.staticSYTQHZ().then(res => {
					this.staticSYTQHZData = res.data;
				})
			},
			staticKS() {
				this.$api.staticKS().then(res => {
					const d = res.data;
					const arr = [];
					for (let i in d) {
						if (d[i].ksList.length != 0) {
							for (let j in d[i].ksList) {
								arr.push(d[i].ksList[j].ksName)
							}
						}
					}
					this.staticKSData = d;
					this.ksList = [...new Set(arr)].filter(item => item);
				})
			},
			// getServerData() {
			// 	//模拟从服务器获取数据时的延时
			// 	setTimeout(() => {
			// 		let res = {
			// 			categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
			// 			series: [{
			// 					name: "目标值",
			// 					data: [35, 36, 31, 33, 13, 34]
			// 				},
			// 				{
			// 					name: "完成量",
			// 					data: [18, 27, 21, 24, 6, 28]
			// 				}
			// 			]
			// 		};
			// 		this.chartData = JSON.parse(JSON.stringify(res));
			// 	}, 500);
			// },
		}
	};
</script>

<style>
	.charts-box {
		width: 100%;
		height: 300px;
	}
	
	.uni-table-th, .uni-table-td {
		padding: 5px 2px;
		font-size: 10px !important;
	}
</style>